<template>
  <transition name="slide-left-fade-reverse" v-if="showCard">
    <div :class="classes" ref="card">
      <div :class="cardHeader" v-if="!noTitle">
        <div v-if="$slots.title" style="display: flex;">
          <span style="flex: 1;">
            <slot name="title"></slot>
          </span>
          <span class="card-control" v-show="toggle || close">
            <Icon v-if="toggle" :type="toggleType" class="toggle-card" @click.native="toggleCard"/>
            <Icon type="md-close" v-if="close" class="close-card" @click.native="closeCard"/>
          </span>
        </div>
        <div v-else>
          <span class="title-txt">{{title}}</span>
          <span class="card-control">
            <Icon v-if="toggle" :type="toggleType" class="toggle-card" @click.native="toggleCard"/>
            <Icon type="md-close" v-if="close" class="close-card" @click.native="closeCard"/>
          </span>
        </div>
      </div>
      <collapse-transition :isShow="isShow">
        <div :class="cardMainer" ref="card-main">
          <slot></slot>
        </div>
      </collapse-transition>
      <!-- TODO: 组件化 -->
      <!-- <transition
        @before-enter="beEnter"
        @enter="enter"
        @after-enter="afEnter"
        @before-leave="beLeave"
        @leave="leave"
        @after-leave="afLeave">
        <div v-show="isShow">
          <div :class="cardMainer" ref="card-main">
            <slot></slot>
          </div>
        </div>
      </transition> -->
    </div>
  </transition>
</template>

<script>
import CollapseTransition from '_c/collapse-transition'
export default {
  name: 'AniCard',
  components: {
    CollapseTransition
  },
  props: {
    // card 标题
    title: {
      type: String,
      default: '-'
    },
    // 切换控制
    toggle: Boolean,
    // 关闭控制
    close: Boolean,
    // 关闭标题显示
    noTitle: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      isShow: true,
      showCard: true,
      toggleType: 'md-remove'
    }
  },
  computed: {
    classes () {
      return [`ani-card`]
    },
    cardHeader () {
      return [`ani-card-header`]
    },
    cardMainer () {
      return [`ani-card-main`]
    }
  },
  mounted () {
  },
  destroyed () {
  },
  methods: {
    toggleCard () {
      this.isShow = !this.isShow
      this.toggleType = this.isShow ? 'md-remove' : 'md-add'
    },
    closeCard () {
      this.showCard = false
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~_c/animation/ani.styl'

card()
  will-change height
  width 100%
  border 1px solid #ddd
  border-radius 4px
  // box-shadow 1px 1px 10px rgba(0, 0, 0, .2)
  box-shadow 1px 1px 3px rgba(0, 0, 0, .2)
  background white

$floatClear
  &:before
  &:after
    display block
    content ''
    clear both
    line-height 0

.ani-card
  card()
  &.slide
    width 0 !important
    height 0 !important
  .ani-card-header
    border-bottom 1px solid #ddd
    box-sizing border-box
    box-shadow 1px 1px 1px rgba(0, 0, 0, .05)
    & > div
      @extend $floatClear
      padding 12px 14px
    & > div
      margin 0px
      padding 12px 14px
      font-size 16px
      color #888
      floatClear()
      span
        float left
      .card-control
        float right
        margin 0px 6px
        padding-top 2px
        user-select none
        .toggle-card
          font-size 14px
          cursor pointer
          margin 0px 2px
          transition all .2s linear
          &:hover
            color #aaa
        .close-card
          cursor pointer
          margin 0px 2px
          transition all .2s linear
          &:hover
            color #aaa
  .ani-card-main
    // height 200px
    will-change height
    box-sizing border-box
    padding 16px
</style>
